<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品展示与购物车系统</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .product {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            padding: 10px;
            border: 1px solid #ccc;
        }
        .product img {
            width: 70px;
            height: auto;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <h1>商品列表</h1>
    <div id="productList">
        <div class="product" data-product-id="1">
            <img src="image1.jpg" alt="商品1图片">
            <div>
                <h3>蜜桔</h3>
                <p>价格: ￥10</p>
                <p>产地: 湖北</p>
            </div>
            <button class="addProductToCart">加入购物车</button>
        </div>
        <!-- 重复以下结构，为每个商品添加相应的信息 -->
        <div class="product" data-product-id="2">
            <img src="image2.jpg" alt="商品2图片">
            <div>
                <h3>西瓜</h3>
                <p>价格: ￥15</p>
                <p>产地: 江西</p>
            </div>
            <button class="addProductToCart">加入购物车</button>
        </div>
        <!-- 添加剩余商品... -->
        <div class="product" data-product-id="3">
            <img src="image3.jpg" alt="商品3图片">
            <div>
                <h3>苹果</h3>
                <p>价格: ￥13</p>
                <p>产地: 湖南</p>
            </div>
            <button class="addProductToCart">加入购物车</button>
        </div>
        <div class="product" data-product-id="4">
            <img src="image4.jpg" alt="商品4图片">
            <div>
                <h3>芒果</h3>
                <p>价格: ￥18</p>
                <p>产地: 四川</p>
            </div>
            <button class="addProductToCart">加入购物车</button>
        </div>
        <div class="product" data-product-id="5">
            <img src="image5.jpg" alt="商品5图片">
            <div>
                <h3>柑橘</h3>
                <p>价格: ￥12</p>
                <p>产地: 湖北</p>
            </div>
            <button class="addProductToCart">加入购物车</button>
        </div>
    </div>

    <h1>我的购物车</h1>
    <button id="showCart">查看购物车</button>
    <div id="cartContents">
        <!-- 购物车内容将在这里显示 -->
    </div>
    <p id="totalPriceDisplay">总价: ￥0</p>
    <button id="calculateTotal">计算总价</button>
    <button id="simulateCheckout">模拟结算</button> 
   
    <script>
        $(document).ready(function() {
            const LOCAL_STORAGE_KEY = 'cartItems';

            function getCartItemsFromStorage() {
                return JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY) || '[]');
            }

            function saveCartItemsToStorage(cartItems) {
                localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(cartItems));
            }

            function createCartItemElement(item) {
                return `
                    <li>
                        
                        <div>
                            <p>商品ID: ${item.productId}</p>
                            <p>名称: ${item.name}</p>
                            <p>价格: ￥${item.price}</p>
                            <p>产地: ${item.origin}</p>
                            <input type="number" class="quantityInput" value="${item.quantity}" min="1">
                            <button class="removeFromCart" data-id="${item.productId}">移除</button>
                        </div>
                    </li>
                `;
            }

            function updateTotalPriceDisplay(total) {
                $('#totalPriceDisplay').text(`总价: ￥${total.toFixed(2)}`);
            }

            function showCartContents(cartItems) {
                let cartHtml = '<ul>';
                let total = 0;
                cartItems.forEach(item => {
                    cartHtml += createCartItemElement(item);
                    total += item.price * item.quantity;
                });
                cartHtml += '</ul>';
                $('#cartContents').html(cartHtml);
                updateTotalPriceDisplay(total);
                attachEventHandlers();
            }

            function attachEventHandlers() {
                $('.removeFromCart').off('click').on('click', removeFromCart);
                $('.quantityInput').off('change').on('change', function() {
                    const productId = $(this).closest('li').find('.removeFromCart').data('id');
                    const quantity = parseInt($(this).val(), 10);
                    updateCartItemQuantity(productId, quantity);
                });
            }

            function addToCart(productInfo) {
                const cartItems = getCartItemsFromStorage();
                const existingItem = cartItems.find(item => item.productId === productInfo.productId);

                if (existingItem) {
                    existingItem.quantity += 1;
                } else {
                    cartItems.push({ ...productInfo, quantity: 1 });
                }

                saveCartItemsToStorage(cartItems);
                showCartContents(cartItems);
                alert('商品已成功添加到购物车！');
            }

            function removeFromCart(event) {
                const productId = $(event.target).data('id');
                const cartItems = getCartItemsFromStorage().filter(item => item.productId !== productId);
                saveCartItemsToStorage(cartItems);
                showCartContents(cartItems);
            }
            function calculateTotalPrice() {
    const cartItems = getCartItemsFromStorage();
    return cartItems.reduce((total, item) => total + (item.price * item.quantity), 0);
}
            function updateCartItemQuantity(productId, quantity) {
                const cartItems = getCartItemsFromStorage().map(item => 
                    item.productId === productId ? { ...item, quantity } : item
                );
                saveCartItemsToStorage(cartItems);
                showCartContents(cartItems);
            }

            $('.addProductToCart').click(function() {
                const product = {
                    productId: $(this).closest('.product').data('product-id'),
                    name: $(this).siblings('div').find('h3').text().trim(),
                    //image: $(this).siblings('div').find('img').attr('src'),
                    // 修改这里，直接从<p>标签提取价格和产地
                    // 修改提取价格的逻辑以正确处理包含货币符号的情况
price: parseFloat($(this).siblings('div').find('p:eq(0)').text().replace("价格: ￥", "")), 

// 如果产地信息确实位于第二个<p>标签内，并且格式正确，这部分逻辑应无需改动。但确保实际HTML结构与之匹配。
origin: $(this).siblings('div').find('p:eq(1)').text().slice(4)
                };
                addToCart(product);
            });

            $('#showCart').click(() => showCartContents(getCartItemsFromStorage()));
            $('#calculateTotal').click(() => updateTotalPriceDisplay(calculateTotalPrice()));
            $('#simulateCheckout').click(() => alert(`模拟结算中，您的总金额为：￥${calculateTotalPrice().toFixed(2)}`));

            showCartContents(getCartItemsFromStorage());
        });
    </script>
</body>
</html>